<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
		<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
		<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
		<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
		<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
		<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> </script>
		<link rel="stylesheet" href="css/animate.min.css">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/index.css">
		<!-- 引入 Bootstrap -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<style>
			.pic {
				background-color: #ccc;
			}


			.img {
				background-color: #ffaaff;
				width: 100%;
				height: 200px;
			}

			.pad0 {
				padding-left: 0 !important;
				padding-right: 0 !important;
			}

			.mar-t50 {
				margin-top: 50px;
			}
		</style>
		<div class="container-fluid">
			<div class="row mar-t50">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pic pad0">
					<div class="img">100%通条</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row mar-t50">
				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 pic">
					<div class="img">1</div>
				</div>

			</div>
			<div class="row mar-t50">
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pic">
					<div class="img">1</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pic">
					<div class="img">2</div>
				</div>
			</div>
			<div class="row mar-t50">
				<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pic">
					<div class="img">1</div>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pic">
					<div class="img">2</div>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pic">
					<div class="img">3</div>
				</div>
			</div>
			<div class="row mar-t50">
				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pic">
					<div class="img">1</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pic">
					<div class="img">2</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pic">
					<div class="img">3</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pic">
					<div class="img">4</div>
				</div>
			</div>




			<!-- 一行4个缩小边2个 -->
			<div class="row mar-t50">
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 pic">
					<div class="img">1</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 pic">
					<div class="img">2</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 pic">
					<div class="img">3</div>
				</div>
				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 pic">
					<div class="img">4</div>
				</div>
			</div>
			<!-- 一行6个缩小边4个 -->
			<div class="row mar-t50">
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">1</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">2</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">3</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">4</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">5</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">6</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">1</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">2</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">3</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">4</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">5</div>
				</div>
				<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2 pic">
					<div class="img">6</div>
				</div>
			</div>



			<!-- 大屏1行2个，小1行1个 -->
			<div class="row mar-t50">
				<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pic">
					<div class="img">img</div>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 pic">
					<div class="img">1fhgfghfghf</div>
				</div>
			</div>



		</div>
	</body>
</html>
